<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich" >

	<ui:composition template="/templates/telainicialPagina.xhtml" >
		<ui:define name="js">
			<h:outputScript library="js" name="jquery.maskedinput-1.2.2.min.js" target="body" />
		</ui:define>
		<ui:define name="css">
			<link rel="stylesheet" type="text/css" href="style/folha.css" media="screen" />
			<link rel="stylesheet" type="text/css" href="style/esqueceuSuaSenha.css" media="screen" />
			<link rel="stylesheet" type="text/css" href="style/folhaextra.css" media="screen" />
			<style type="text/css">
				body {
					margin-left: 0px;
					margin-top: 0px;
					margin-right: 0px;
					margin-bottom: 0px;
				}
				a:link {
					color: #2f3191;
					text-decoration: none;
				}
				a:visited {
					text-decoration: none;
					color: #2f3191;
				}
				a:hover {
					text-decoration: underline;
					color: #0033FF;
				}
				a:active {
					text-decoration: none;
					color: #2f3191;
				}
			</style>
		</ui:define>
		
		<ui:define name="linkusa">
			<h:form>
   	  			<a4j:commandLink action="#{telaInicialBean.inicio}">
   	  				<img src="images/logo.gif" width="198" height="96" />
   	  			</a4j:commandLink>
   	  		</h:form>
		</ui:define>
		
		<ui:define name="linksup1">
			<h:form>
    			<a4j:commandLink action="#{telaInicialBean.sobreUsaPre}" value="Sobre o USACARD PRÉ" styleClass="menusupclass" />
   			</h:form>
		</ui:define>
		<ui:define name="linksup2">
			<h:form>
    			<a4j:commandLink action="#{telaInicialBean.todasAsVantagens}" value="+ Vantagens" styleClass="menusupclass" />
   			</h:form>
		</ui:define>
		<ui:define name="linksup3">
			<h:form>
       			<a4j:commandLink action="#{telaInicialBean.duvidasFrequentes}" value="Dúvidas Frequentes" styleClass="menusupclass" />
       		</h:form>
		</ui:define>
		<ui:define name="linksup4">
			<h:form>
       			<a4j:commandLink action="#{telaInicialBean.contatos}" value="Contato" styleClass="menusupclass" />
       		</h:form>	
		</ui:define>
		
		<ui:define name="login">
			<h:form id="formLogin" onkeypress="if (event.keyCode == 13) { document.getElementById('formLogin:loginSubmit').click(); return false; }">
				
	       	  	<div class="login_box">
           			<div class="text1">MINHA CONTA</div>
            		<div class="field1_text" align="right">login:</div>
            		<div class="field1"><h:inputText value="#{loginUsaPreBean.login}" size="25" styleClass="inputstyle" /></div>
	            	<div class="field1_text" align="right">senha:</div>
	            	<div class="field1"><h:inputSecret value="#{loginUsaPreBean.senha}" size="25" styleClass="inputstyle" /></div>
	            	<div class="field2_text" id="link2">
	            		<a4j:commandLink id="loginSubmit" styleClass="labellogin" action="#{loginUsaPreBean.logon}" value="login" />
	            	</div>
            		<div class="text2" id="link2">
            			<a4j:commandLink styleClass="itemlinkclass" value="não consigo logar" action="#{telaInicialBean.esqueceuSenha}" /> | 
	            		<a4j:commandLink styleClass="itemlinkclass" value="peça o seu" action="#{telaInicialBean.cadastreSe}" />
	        		</div>
       			</div>
				
			</h:form>
		</ui:define>
		
		<ui:define name="conteiner1">
			<h:form>
        		<a4j:commandLink styleClass="itemmidsupclass" value="PEÇA O SEU" action="#{telaInicialBean.cadastreSe}" />
			</h:form>
		</ui:define>	
		<ui:define name="conteiner2">
			<h:form>
				<a4j:commandLink styleClass="itemmidsupclass" value="RECARREGUE" action="#{telaInicialBean.goRecarregueOffLine}" render="mensagens" />
			</h:form>
		</ui:define>
		<ui:define name="conteiner3">
			<h:form>
				<a4j:commandLink styleClass="itemmidsupclass" value="COMPRE COM DESCONTO" action="#{telaInicialBean.compreComDesconto}" />
			</h:form>
		</ui:define>
		<ui:define name="conteiner4">
			<h:form>
				<a4j:commandLink styleClass="itemmidsupclass" value="CONHEÇA A REDE" action="#{telaInicialBean.conhecaARede}" />
			</h:form>
		</ui:define>
		<ui:define name="conteiner5">
			<h:form>
				<a4j:commandLink styleClass="itemmidsupclass" value="LOJISTA" action="#{telaInicialBean.lojista}" />
			</h:form>
		</ui:define>
		
		<ui:define name="banner">
			<img src="images/banner2.jpg" width="1000" height="160" />
		</ui:define>
		<ui:define name="interior">
			
			<h:form id="form01">
		
				<div class="submenu_area">
					<div class="titulo"><strong>Recuperação de senha</strong></div>
		      		<div class="retangulo_conteudo5">
		        		<div class="retangulo_conteudo8">
		        		
		        			<h:panelGroup rendered="#{esqueceuSuaSenhaBean.senhaEnviada}">
		        			
		        				<div class="texto21"></div>
			          			<div class="left" align="right"></div>
			          			<div class="right">
			            			<h:outputText value="A sua solicitação foi enviada" />
			          				<h:commandButton value="Voltar" styleClass="botao-tela-inicial" action="#{esqueceuSuaSenhaBean.abrirTelaLogin}"/>
			          			</div>
			          			
		        			</h:panelGroup>
		        			<h:panelGroup rendered="#{!esqueceuSuaSenhaBean.senhaEnviada}">
		        		
			          			<div class="texto21"></div>
			          			<div class="left" align="right"></div>
			          			<div class="right">
			            			<h:selectOneMenu value="#{esqueceuSuaSenhaBean.selectItemEscolhido}" style="width:180px" >
				          				<f:selectItem itemLabel="Escolha a opção" noSelectionOption="true" />
				          				<f:selectItems value="#{esqueceuSuaSenhaBean.opcoes}" />
				          				<f:ajax event="change" listener="#{esqueceuSuaSenhaBean.atualizaCampos}" render="painel"/>
				          			</h:selectOneMenu>
			          			</div>
			          			
			          			<h:panelGroup id="painel">
			          				<h:panelGroup rendered="#{esqueceuSuaSenhaBean.mostrarEsqueciUsuario}">
			          					<div class="right"></div>
					          			<div class="left" align="right"></div>
					          			<div class="right">
					          				<h:selectOneMenu value="#{esqueceuSuaSenhaBean.tipoPessoaEscolhido}" style="width:180px" >
						          				<f:selectItems value="#{esqueceuSuaSenhaBean.opcoesTipoPessoa}" />
						          				<f:ajax event="change" listener="#{esqueceuSuaSenhaBean.atualizaCamposTipoPessoa}" render="painel2"/>
						          			</h:selectOneMenu>
					          			</div>
			          			
			          					<h:panelGroup id="painel2">
			          						<h:panelGroup rendered="#{esqueceuSuaSenhaBean.mostrarPessoaFisica}">
			          							<div class="right"></div>
							          			<div class="left" align="right">CPF</div>
							          			<div class="right">
							          				<h:inputText id="cpf" value="#{esqueceuSuaSenhaBean.cpf}" size="30" />
							            			<rich:jQuery selector="#form01\:cpf" query="mask('999.999.999-99')" timing="domready" />
							          			</div>
			          						</h:panelGroup>
			          						<h:panelGroup rendered="#{esqueceuSuaSenhaBean.mostrarPessoaJuridica}">
			          							<div class="right"></div>
							          			<div class="left" align="right">CNPJ:</div>
							          			<div class="right">
							          				<h:inputText id="cnpj" value="#{esqueceuSuaSenhaBean.cnpj}" size="30" />
							            			<rich:jQuery selector="#form01\:cnpj" query="mask('99.999.999/9999-99')" timing="domready" />
							          			</div>
			          						</h:panelGroup>
			          					</h:panelGroup>
				          				
					          			<div class="right"></div>
					          			<div class="left" align="right">E-mail:</div>
					          			<div class="right">
								            <h:inputText id="itememail02" value="#{esqueceuSuaSenhaBean.email}" size="30" required="true" 
					         					requiredMessage="CAMPO DE EMAIL É OBRIGATÓRIO" validatorMessage="FORMATO DE EMAIL INVÁLIDO" >
								            	<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
					         				</h:inputText>
					          			</div>
					          			<div class="right">
					          				<a4j:commandLink action="#{esqueceuSuaSenhaBean.esqueciMeuUsuario}"  render="@all" >
					          					<img src="images/botao_enviar1a.jpg" alt="" width="55" height="24" />
					          				</a4j:commandLink>
					          			</div>
					          			<div class="left" align="right"></div>
					          			<div class="right"></div>
					          			<div class="espacador_horizontal2"></div>
					          			
				          			</h:panelGroup>
				          			
				          			<h:panelGroup rendered="#{esqueceuSuaSenhaBean.mostrarEsqueciSenha}">
				          				
				          				<div class="right"></div>
					          			<div class="left" align="right"></div>
					          			<div class="right">
					          				<h:selectOneMenu value="#{esqueceuSuaSenhaBean.tipoPessoaEscolhido}" style="width:180px" >
						          				<f:selectItems value="#{esqueceuSuaSenhaBean.opcoesTipoPessoa}" />
						          				<f:ajax event="change" listener="#{esqueceuSuaSenhaBean.atualizaCamposTipoPessoa}" render="painel2"/>
						          			</h:selectOneMenu>
					          			</div>
			          			
			          					<h:panelGroup id="painel3">
			          						<h:panelGroup rendered="#{esqueceuSuaSenhaBean.mostrarPessoaFisica}">
			          							<div class="right"></div>
							          			<div class="left" align="right">CPF</div>
							          			<div class="right">
							          				<h:inputText id="cpf1" value="#{esqueceuSuaSenhaBean.cpf}" size="30" />
							            			<rich:jQuery selector="#form01\:cpf1" query="mask('999.999.999-99')" timing="domready" />
							          			</div>
			          						</h:panelGroup>
			          						<h:panelGroup rendered="#{esqueceuSuaSenhaBean.mostrarPessoaJuridica}">
			          							<div class="right"></div>
							          			<div class="left" align="right">CNPJ:</div>
							          			<div class="right">
							          				<h:inputText id="cnpj1" value="#{esqueceuSuaSenhaBean.cnpj}" size="30" />
							            			<rich:jQuery selector="#form01\:cnpj1" query="mask('99.999.999/9999-99')" timing="domready" />
							          			</div>
			          						</h:panelGroup>
			          					</h:panelGroup>
				          				
					          			<div class="right"></div>
					          			<div class="left" align="right">E-mail:</div>
					          			<div class="right">
								            <h:inputText id="itememail01" value="#{esqueceuSuaSenhaBean.email}" size="30" required="true" 
					         					requiredMessage="CAMPO DE EMAIL É OBRIGATÓRIO" validatorMessage="FORMATO DE EMAIL INVÁLIDO" >
					         					<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
					         				</h:inputText>	
					          			</div>
					          			<div class="right">
					          				<a4j:commandLink action="#{esqueceuSuaSenhaBean.esqueciMinhaSenha}" render="@all" >
					          					<img src="images/botao_enviar1a.jpg" alt="" width="55" height="24" />
					          				</a4j:commandLink>
					          			</div>
					          			<div class="left" align="right"></div>
					          			<div class="right"></div>
					          			<div class="espacador_horizontal2"></div>
					          			
				          			</h:panelGroup>
			          			</h:panelGroup>
		          			</h:panelGroup>
		          			
		        		</div>
		        		<div class="retangulo_conteudo8">
		          			<div class="box3"></div>
		          			<div class="espacador_horizontal2"></div>
		        		</div>
		        		<div class="espacador_horizontal2"></div>
		      		</div>
				</div>
				
			</h:form>
			
		</ui:define>	
		
	</ui:composition>

</html>